{extend name="Home/Theme/Inception/base" /}

{block name="meta"}
<meta name="keywords" content="{$article['keywords']}">
<meta name="description" content="{$article['description']}">
{/block}

{block name="title"}{$article['name']}_{/block}

{block name="style"}
<link rel="stylesheet" type="text/css" href="/static/home/theme/inception/css/androidstudio.css">
<style>
    .comment_date {
        font-size: 13px;
        color: #999;
        font-style: italic;
    }
    #comment, #comment1{
        width: 72px;
        height: 28px;
        color: #fff;
        background: #ed7156;
        border-radius: 16px;
        font-size: 14px;
        text-align: center;
        line-height: 28px;
        border: none;
        position: absolute;
        top: 8px;
        right: 0;
    }
    #comments, #comments1{
        resize: none;
        border-radius: 5px;
        width: 230px;
        margin-right: 10px;
    }
    .reply {
        cursor: pointer;
    }
</style>
{/block}

{block name="search"}
 <input name="nav_id" value="{$article['navs_id']}" type="hidden" />
 <input name="search" size="11" id="edtSearch" type="text">
{/block}

{block name="main"}
<div class="main zh">

    
    <div class="left fl mb15">
        <div class="info bgb mb15">
        <h2 class="place ybbt1">
            <i class="fa fa-home"></i>
            <a href="/index.html">网站首页</a>
            <i class="fa fa-angle-right"></i>
            <a href="/category/{$article['navs_id']}.html" title="{$article['nav_name']}">{$article['nav_name']}</a>
            <i class="fa fa-angle-right"></i>正文
        </h2>
        <div class="info-bt">
        <h1 class="title">{$article['name']}</h1>
        <small>
            <span><i class="fa fa-user"></i></span>
            <span>
                <i class="fa fa-clock-o"></i>{$article['update_time']}
            </span>
            <span>
                <i class="fa fa-folder"></i>
                <a href="/category/{$article['navs_id']}.html" title="{$article['nav_name']}" target="_blank">{$article['nav_name']}</a>
            </span>
        </small>
        </div>
        <div class="info-zi mb15">
            <div>
                {$article['content']|raw}
            </div>
        </div>
        <div class="sx mb15">
            <ul>
                {if $article['previous']}
                <li class="fl">上一篇：<a href="/articles/{$article['previous']['id']}.html" title="{$article['previous']['name']}">{$article['previous']['name']}</a></li>
                {else /}
                <li class="fl">上一篇：没有了</li>
                {/if}
                {if $article['next']}
                <li class="fl">下一篇：<a href="/articles/{$article['next']['id']}.html" title="{$article['next']['name']}">{$article['next']['name']}</a></li>
                {else /}
                <li class="fr ziyou">下一篇：没有了</li>
                {/if}
                <div class="clear"></div>
            </ul>
        </div>
        </div>
    </div>
    <div class="right fr sjwu">
        {include file="Home/Theme/Inception/navchild" /}
        {include file="Home/Theme/Inception/news" /}
        {if $comment == '是'}
        <dl class="function" id="divPrevious">
            <dt class="function_t">
                评论
            </dt>
            <div style="position: relative;">
                <textarea id="comments" placeholder="评论不能超过1000个字符{if $comment_audit =='否'},评论需要审核{/if}"></textarea><button id="comment">评论</button>
            </div>
            <dd class="function_c">
                <ul class="flow-default" id="LAY_demo1" style="height: 300px;overflow: auto;"></ul>
            </dd>
        </dl>
        {/if}
    </div>
    <div class="clear"></div>
</div>
</div>

{/block}

{block name="js"}
<script type="text/javascript" src="/static/home/theme/inception/js/highlight.pack.js"></script>
<script type="text/javascript">
$(function(){
    $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
      });
});
</script>
{if $comment == '是'}
<script src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['layer'], function(){
    var layer = layui.layer;
});
function comment(comment, parent_id){
    let param = {
        article_id: "{$article['id']}", comment: comment, parent_id: parent_id
    }
    $.post("/comment", param, function(data) {
        if (data.code && data.code != 200) {
            layer.msg(data.msg);
        }
    })
}
$("#comment").click(function(){
    let comments = $("#comments").val();
    if (comments) {
        comment(comments, 0);
        $("#comments").val('')
    }
})
$(document).on("click", "#comment1", function(){
    let comments = $("#comments1").val();
    if (comments) {
        comment(comments, $(this).attr("data-id"));
        $("#comments1").val('')
    }
})
$(document).on("click", ".reply", function(){
    let parent_id = $(this).parent(".comment_date").attr("data-id");
    let html = '<div style="position: relative;" id="reply">'+
        '<textarea id="comments1" placeholder="评论不能超过1000个字符{if $comment_audit =="否"},评论需要审核{/if}"></textarea><button id="comment1" data-id="'+parent_id+'">评论</button>'+
    '</div>';
    $("#reply").remove();
    $(this).parent("div").parent("div").after(html)
})
layui.use('flow', function(){
    var flow = layui.flow;
    flow.load({
        elem: '#LAY_demo1' //流加载容器
        ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
        ,done: function(page, next){ //执行下一页的回调
            $.post("/comments", {id: "{$article['id']}", page: page}, function(data) {
                if (data.code == 200) {
                    var lis = [];
                    data.result.datas.forEach(da => {
                        var html = '<li><div>'+
                                        '<div class="comment_date" data-id="' + da.id + '">'+da.comment_time +
                                            '<a class="reply" style="float: right">回复</a>'+
                                        '</div>'+
                                        '<div>'+da.comment+'</div>'+
                                    '</div></li>';
                        da.child.forEach(item => {
                            html += '<li style="margin-left: 20px;"><div>'+
                                        '<div class="comment_date">'+item.comment_time+'</div>'+
                                        '<div>'+item.comment+'</div>'+
                                    '</div></li>';
                        })
                        lis.push(html)
                    });
                    next(lis.join(''), page <= data.result.last_page);
                }
            })
        }
    });
});
</script>
{/if}
{/block}